<template>
  <div>
    <div class="content" v-for="(item,i) in information" :key="i">
      <p>
        <span>{{item.receiverName}}</span>
        <span class="phone">{{ item.receiverMobile}}</span>
      </p>
      <h4>收货地址 ：{{item.province}}{{item.city}}{{item.area}}{{item.addr}}</h4>
      <h5>
        <input type="checkbox" value />默认收货地址
        <i class="el-icon-edit blue" @click="tiao(i)"></i>
        <i class="el-icon-delete red" @click="delAdd(item)"></i>
      </h5>
    </div>
    <router-link to="/newAddress">
      <div class="newAdd">新增收货地址</div>
    </router-link>
  </div>
</template>

<script>
import { listAdd ,delAdd} from '../../api/index'
export default {
  data() {
    return {
      information: [],
    }
  },
  methods: {
	
    listAdd() {
      console.log(this.$store.state.uid, 'userid')
      listAdd({ userId: this.$store.state.uid ,addr:this.information.addr}).then(res => {
        console.log(res, 'resadd')
        this.information = res.data.data
      })
    },
    delAdd(item) {
			// console.log(item.addrId,'lll');
      delAdd({
        addrId: item.addrId,
        userId: this.$store.state.uid,
      }).then(res=>{
				console.log(res,"del");
				this.information = res.data.data
			})
    },
		tiao(i){
			console.log(this.information[i],'sssss');
			this.$router.push({
				name:"editAddress",
				params:this.information[i]
			})
		},
		

  },
  mounted() {
    // console.log(this.$router.history,'1');
    // console.log(this.$route.params,"fengl");
    // console.log(this.$store.state.addressList,"tttt");
		// console.log(this,information,"xinxi");
    this.listAdd()
  },
}
</script>

<style scoped>
.content {
  /* margin-top: 10vh; */
  width: 100vw;
  height: 15vh;
  /* background: rosybrown; */
  border-bottom: 0.5vh solid #f1f1f1;
  padding-left: -4.5vw;
  padding-bottom: 1.5vh;
}
.content p {
  display: flex;
  /* justify-content: space-evenly; */
  margin-left: 12vw;
  width: 100vw;
  height: 6vh;
  /* background: skyblue; */
  line-height: 6vh;
  font-size: 18px;
  margin-top: 2vh;
}
.content h4 {
  font-weight: normal;
  font-size: 14px;
  color: #ccc;
  margin-left: 12vw;
  margin-top: 1vh;
}
.content h5 {
  margin-left: 13vw;
  margin-top: 2vh;
  font-weight: normal;
}
.content h5 i {
  margin-left: 8vw;
  font-size: 22px;
}
.blue {
  color: skyblue;
}
.red {
  color: red;
}
.newAdd {
  width: 100vw;
  height: 10vh;
  background: #409eff;
  text-align: center;
  line-height: 10vh;
  font-size: 20px;
  color: #fff;
  font-weight: bold;
  position: fixed;
  bottom: 0vh;
}
b {
  position: absolute;
  top: 3vh;
  left: 4vw;
  font-weight: bold;
  color: #409eff;
  font-size: 24px;
}
.phone {
  font-size: 12px;
  color: rgba(51, 51, 51, 0.596);
  padding-left: 5vw;
}
</style>